<template>
  <div>
    <!-- 修改 -->
    <el-dialog
      append-to-body
      title="修改客户信息"
      :visible.sync="dialogFormVisible2"
      width="700px"
      class="dialog"
      @close="clearCustomer"
    >
      <el-form inline :model="Customer">
        <el-card class="box-card">
          <div class="text item">
            <el-form-item label="客户ID">
              <el-input size="mini" v-model="Customer.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="客户名称">
              <el-input size="mini" v-model="Customer.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input size="mini" v-model="Customer.contact"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input size="mini" v-model="Customer.number"></el-input>
            </el-form-item>
            <el-form-item label="联系地址">
              <el-input type="text" size="mini" v-model="Customer.address"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" size="mini" v-model="Customer.remarks"></el-input>
            </el-form-item>
          </div>
          <div class="card_bottom">
            <el-form-item style="float:right;">
              <el-button type="success" size="mini" @click="upCustomer">修改</el-button>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-dialog>
    <!-- 添加客户信息 -->
    <el-dialog
      append-to-body
      title="添加客户"
      :visible.sync="dialogFormVisible1"
      width="700px"
      class="dialog"
      @close="clearCustomer"
    >
      <el-form inline :model="Customer">
        <el-card class="box-card">
          <div class="text item">
            <el-form-item label="客户名称">
              <el-input size="mini" v-model="Customer.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input size="mini" v-model="Customer.contact"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input size="mini" v-model="Customer.number"></el-input>
            </el-form-item>
            <el-form-item label="联系地址">
              <el-input type="text" size="mini" v-model="Customer.address"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" size="mini" v-model="Customer.remarks"></el-input>
            </el-form-item>
          </div>
          <div class="card_bottom">
            <el-form-item style="float:right;">
              <el-button type="success" size="mini" @click="addCustomer">添加</el-button>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-dialog>
    <!-- 客户查询与列表 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" style="float:left;" :model="form" class="demo-form-inline">
          <el-form-item label="客户名称">
            <el-input size="mini" v-model="form.name" placeholder="客户名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              size="mini"
              round
              @click="getRequest()"
              icon="el-icon-search"
            >查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="text" icon="el-icon-circle-plus-outline" @click="add">添加</el-button>
            <el-button type="text" icon="el-icon-setting" @click="toup">修改</el-button>
            <el-button type="text" icon="el-icon-delete" @click="del">删除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          @row-click="clickCustomer"
          @cell-dblclick="Customertabledouble"
        >
          <el-table-column prop="id" label="id" width="50"></el-table-column>
          <el-table-column prop="contact" label="联系人" width="120"></el-table-column>
          <el-table-column prop="name" label="客户名称" width="200"></el-table-column>
          <el-table-column prop="address" label="联系地址" width="300"></el-table-column>
          <el-table-column prop="number" label="联系电话" width="300"></el-table-column>
          <el-table-column prop="remarks" label="备注" width="200"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
var id = {};
export default {
  mounted() {
    this.getRequest();
    // this.action =
    //   "http://localhost:9999/basic/basic/tCustomer/getExcel?access_token=" +
    //   localStorage.getItem("access_token");
  },
  methods: {
    clickCustomer(row, column, cell, event) {
      console.log("Customer 行row", row);
      this.Customer = JSON.parse(JSON.stringify(row));
    },
    toup() {
      
      this.dialogFormVisible2 = true;
    },
    upCustomer() {
      var $this = this;
      this.Customer["access_token"] = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: "http://localhost:9999/basic/basic/tCustomer/up",
        params: this.Customer
      }).then(function(res) {
        console.log("==================================", res.data.obj);
        $this.Customer = {};
        $this.dialogFormVisible2 = false;
        $this.getRequest();
      });
    },
    del() {
      if (this.Customer != {}) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            var $this=this;
            var ids = this.Customer.id + "";
            this.Customer.ids = ids;
            this.Customer["access_token"] = localStorage.getItem(
              "access_token"
            );
            this.axios({
              method: "get",
              url: "http://localhost:9999/basic/basic/tCustomer/del",
              params: this.Customer
            }).then(function(res) {
              console.log("==================================", res.data.obj);
              $this.getRequest();
              $this.$message({
                type: "success",
                message: "删除成功!"
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.$message({
          type: "info",
          message: "请选择一条数据"
        });
      }
    },
    add() {
      this.dialogFormVisible1 = true;
    },
    clearCustomer() {
      this.Customer = {};
    },
    addCustomer() {
      var $this = this;
      this.Customer["access_token"] = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: "http://localhost:9999/basic/basic/tCustomer/add",
        params: this.Customer
      }).then(function(res) {
        console.log("==================================", res.data.obj);
        $this.Customer = {};
        $this.dialogFormVisible1 = false;
        $this.getRequest();
      });
    },
    Customertabledouble(row, column, cell, event) {
      console.log("Customers 行row", row);
      this.Customer = JSON.parse(JSON.stringify(row));
      this.Customer.price = this.Customer.sellingPrice;
      this.Customer.num = 1;
      this.dialogFormVisible2 = true;
    },
    getRequest() {
      this.form.pageNum = this.pageNum;
      this.form.pageSize = this.pageSize;
      var $this = this;
      this.form["access_token"] = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: "http://localhost:9999/basic/basic/tCustomer/list",
        params: this.form
      }).then(function(res) {
        console.log("==================================", res.data.obj);
        $this.tableData = res.data.obj.list;
        $this.total = res.data.obj.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getRequest();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getRequest();
    }
  },

  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      form: {
        name: "",
        pageNum: 1,
        pageSize: 10
      },
      dialogFormVisible2: false,
      dialogFormVisible1: false,
      Customer: {},
      action: ""
    };
  }
};
</script>
<style scoped>
</style>